<template>
  <div id="unit" class="flex-row">
    <div class="flex" >
      <criteria-paged :model="model" v-ref:paged  @sort="sort">
        <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
         <div novalidate class="form-inline" partial>
           <div class="form-group">
             <input  type="text" class="form-control" v-model="model.f_userinfo_id" placeholder='用户编号'
             condition="e.f_userinfo_id = '{}'" v-next-el='abc' v-filter v-focus>
           </div>
           <!-- <div class="form-group">
             <input  type="text" class="form-control" v-model="model.f_username" placeholder='用户姓名'
             condition="f_username = '{}'" v-next-el='abc' v-filter v-focus>
           </div> -->

           <div class="form-group">
             <input  type="text" class="form-control" v-model="model.f_meternumber" placeholder='表号'
             condition="e.f_meternumber = '{}'" v-next-el='abc' v-filter v-focus>
           </div>

             <div class="form-group">
              <datepicker id="startdate"
              placeholder="开始日期"
              v-model="model.startdate"
              :value.sync="model.startdate"
              condition="f_eventdate >='{}'"
              :format="'yyyy-MM-dd'"
               :disabled-days-of-Week="[]"
              width="100%">
            </div>
            <div class="form-group">
                <datepicker id="enddate"
                placeholder="结束日期"
                v-model="model.enddate"
                :value.sync="model.enddate"
                condition="f_eventdate <='{}'"
                :format="'yyyy-MM-dd'"
                 :disabled-days-of-Week="[]"
                width="100%">
            </div>
            <div class="form-group">
            <v-select id="f_paytype"
            v-model="model.f_eventmsg"
            placeholder='故障类型'
            :value.sync="model.f_eventmsg"
            :options='$parent.$parent.eventmsg'
            condition="f_eventmsg = '{}'"
            close-on-select ></v-select>
          </div>
           <div class="form-group">
             <button class="btn btn-success active" @click="$parent.$parent.search()" v-el:cba>查询</button>
           </div>
         </div>
        </criteria>
        <data-grid  :model="model" partial='list' v-ref:grid>
          <template partial='head'>
              <tr>
               <th>序号</th>
               <th>用户编号</th>
               <th>表号</th>
               <th>事件描述</th>
               <th>事件时间</th>
            </tr>
          </template>
          <template partial='body'>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_userinfo_id}}</td>
            <td style="text-align:center">{{row.f_meternumber}}</td>
            <td style="text-align:center">{{row.f_eventmsg}}</td>
            <td style="text-align:center">{{row.f_eventdate}}</td>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
      <events style="width:38%"></events>
  </div>

</template>

<script>
import { PagedList } from 'vue-client'
import AppData from '../../stores/AppData'
import * as Util from '../Util'

export default {
  title: '表事件查看',
  data () {
    return {
      model: new PagedList('rs/sql/getEvents', 20,
       {orderitem: '"' + this.orderitem + '"'})
    }
  },
  props: {
    orderitem: {
      type: String,
      default: 'e.id DESC'
    }
  },
  ready () {
    this.search()
  },
  methods: {
    search () {
      console.log('正在查询', this.$refs)
      this.$refs.paged.$refs.cri.search()
    },
    selfSearch (args) {
      if (!Util.f.parent.parent.name.includes('统一资源管理')) {
        args.condition = `${args.condition} and u.f_filiale = '${Util.f.f_fengongsi}'`
      }
      this.model.search(args.condition, args.model)
    }
  },
  computed: {
    eventmsg () {
      return [{label: '全部', value: ''}, ... AppData.getParam('故障类型')]
    }
  }
}
</script>
